// Header Cap
//
// The Header cap provides a "lip" area that sticks out below the header,
// provided the browser can support CSS Grid.
//
// <div aria-hidden="true" class="c-lip">
//   <div class="c-lip__hollow"></div>
//   <div class="c-lip__fill"></div>
// </div>
//
// Style guide: Components.lip
.c-lip {
	height: 2rem;

	// Supports
	@supports #{$supports-grid} {
		// Breakpoints
		@include mappy-bp(lap-small) {
			height: unset;
		}
	}
}


.c-lip__fill {
	@supports #{$supports-grid} {
		// Breakpoints
		@include mappy-bp(lap-small) {
			.template-posts &,
			.template-checklist &,
			.template-resources &,
			.template-about &,
			.template-team &,
			.template-authors &,
			.template-spotlight &,
			.template-contribute {
				@include var(background-color, hero-background);
			}
		}
	}
}
